<template>
    <div class="personnel">
        <page-main>
            <div class="flc">
                <h3 style="margin-right: auto;">律师筛选</h3>
                <el-button type="primary" icon="el-icon-search" class="my-btn" @click="_getLawyerList()">搜索</el-button>
            </div>
            <el-form ref="search" :model="search" label-width="80px" size="small">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="律师姓名">
                            <el-input v-model="search.nickname" placeholder="请输入用户名" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号">
                            <el-input v-model="search.mobile" placeholder="请输入手机号" clearable />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="加入时间">
                            <el-date-picker
                                v-model="search.joinTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="changeTime"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最后登录">
                            <el-date-picker
                                v-model="search.endTime"
                                size="small"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="changeTimeEnd"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="在线状态">
                            <el-radio-group v-model="search.isonline">
                                <el-radio-button :label="2">全部</el-radio-button>
                                <el-radio-button :label="1">在线</el-radio-button>
                                <el-radio-button :label="0">离线</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <!--<el-col :span="12">
                        <el-form-item label="会员等级">
                            <el-radio-group v-model="search.level">
                                <el-radio-button label="1">全部</el-radio-button>
                                <el-radio-button label="2">VIP</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>-->
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="擅长属性">
                            <el-checkbox-group v-model="search.tag_ids" @change="changeTag">
                                <el-checkbox v-for="tag in tagList" :key="tag.id" :label="tag.id">{{ tag.name }}</el-checkbox>
                                <!--<el-checkbox label="2">房产纠纷</el-checkbox>
                                <el-checkbox label="3">公司工商</el-checkbox>
                                <el-checkbox label="4">交通事故</el-checkbox>
                                <el-checkbox label="5">合同纠纷</el-checkbox>
                                <el-checkbox label="6">债权纠纷</el-checkbox>
                                <el-checkbox label="7">劳动用工</el-checkbox>
                                <el-checkbox label="8">刑事辩护</el-checkbox>
                                <el-checkbox label="9">行政复议</el-checkbox>
                                <el-checkbox label="10">行政诉讼</el-checkbox>-->
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div class="flc">
                <h3 style="margin-right: auto;">律师列表</h3>
                <el-button type="primary" class="my-btn" @click="addLawyer">添加律师</el-button>
            </div>
            <el-table
                :data="tableData"
                :header-cell-style="{background:'#f2f2f2',color:'#555',textAlign: 'center'}"
                border
                style="width: 100%;"
            >
                <el-table-column label="姓名/律所" align="left" width="240">
                    <template slot-scope="scope">
                        <div class="over-hidden">
                            <img class="avatar" :src="scope.row.avatar || require('../../assets/images/logo.png')" alt="">
                            <div class="info">
                                <div class="top">
                                    <span>{{ scope.row.nickname }}</span>
                                </div>
                                <div class="bot">{{ scope.row.office_name }}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="业务标签" align="center">
                    <template slot-scope="scope">
                        <div class="tags">
                            <span v-for="item in scope.row.tags" :key="item.id">{{ item.name }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center" />
                <el-table-column label="加入时间/最后登录" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.create_time }}</div>
                        <div>{{ scope.row.last_time }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="在线状态" align="center">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isonline === 1">
                            <span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #67c23a;" />
                            <span style="color: #67c23a; padding-left: 2px;">在线</span>
                        </div>
                        <div v-else>
                            <span style="display: inline-block; width: 12px; height: 12px; border-radius: 50%; background-color: #c0c4cc;" />
                            <span style="color: #c0c4cc; padding-left: 2px;">离线</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleClick(scope.row, 'setting')">设置</el-button>
                        <el-button type="text" size="small" @click="handleClick(scope.row, 'edit')">编辑</el-button>
                        <el-button type="text" size="small" @click="handleClick(scope.row, 'order')">订单</el-button>
                        <el-button type="text" size="small" @click="handleClick(scope.row, 'off')">离职</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <Pagination
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                :total="total"
                @handle-size-change="handleSizeChange"
                @handle-current-change="handleCurrentChange"
            />
        </page-main>
        <el-dialog
            class="personnel-dialog"
            :title="dialogTitle"
            :visible.sync="addLawyerDialog"
            width="60%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <el-form ref="addLawyerForm" :model="addLawyerForm" :rules="rules" label-width="80px" size="small">
                <el-row :gutter="10" type="flex" justify="space-between">
                    <el-col :span="11">
                        <el-form-item label="律师姓名" required style="width: 100%;">
                            <!--<el-input v-model="addLawyerForm.nickname" placeholder="请输入内容" />-->
                            <el-autocomplete
                                v-model="addLawyerForm.nickname"
                                :fetch-suggestions="querySearchAsync"
                                placeholder="请输入内容"
                                clearable
                                @select="handleSelectFetch"
                            />
                        </el-form-item>
                        <el-form-item label="所在律所" prop="office_id">
                            <el-select v-model="addLawyerForm.office_id" placeholder="请选择" style="width: 100%;">
                                <el-option
                                    v-for="item in lawOfficeList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系电话" prop="mobile">
                            <el-input v-model="addLawyerForm.mobile" placeholder="请输入电话" clearable />
                        </el-form-item>
                        <el-form-item label="属性标签" prop="tag_ids">
                            <el-select v-model="addLawyerForm.tag_ids" multiple placeholder="请选择" style="width: 100%;">
                                <el-option
                                    v-for="item in tagList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="选择地区" prop="selectedOptions">
                            <el-cascader
                                v-model="addLawyerForm.selectedOptions"
                                style="width: 100%;"
                                :options="cityTwo"
                                :separator="' '"
                                clearable
                                @change="handleChangeCity"
                            />
                        </el-form-item>
                        <el-form-item label="职称" prop="job_title">
                            <el-input v-model="addLawyerForm.job_title" placeholder="请输入职称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="个人介绍" prop="introduction">
                            <el-input v-model="addLawyerForm.introduction" type="textarea" />
                        </el-form-item>
                        <el-form-item label="头像" prpo="avatar" required>
                            <div class="upload" style="position: relative;">
                                <el-upload
                                    class="avatar-uploader my-upload"
                                    action=""
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                    :http-request="uploadFile"
                                    :on-remove="handleRemove"
                                >
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                                </el-upload>
                                <i v-show="imageUrl" class="el-icon-close upload-del" style="cursor: pointer;" @click="deleteAvatar" />
                                <img class="img" src="../../assets/images/logo.png" alt="">
                            </div>
                            <el-progress v-show="isShowPercentage" :percentage="percentage" />
                            <div style="font-size: 12px;">图片建议尺寸300*300px</div>
                        </el-form-item>
                        <el-form-item label="大头像" prpo="avatar">
                            <div class="upload" style="position: relative;">
                                <el-upload
                                    class="avatar-uploader my-upload"
                                    action=""
                                    :show-file-list="false"
                                    :before-upload="beforeAvatarUpload"
                                    :http-request="uploadFileBig"
                                    :on-remove="handleRemove"
                                >
                                    <img v-if="imageUrlBig" :src="imageUrlBig" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon" />
                                </el-upload>
                                <i v-show="imageUrlBig" class="el-icon-close upload-del" style="cursor: pointer;" @click="deleteAvatarBig" />
                            </div>
                            <el-progress v-show="isShowPercentageBig" :percentage="percentage" />
                            <!--<div style="font-size: 12px;">图片建议尺寸300*300px</div>-->
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelLawyerDialog">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 设置的dialog -->
        <el-dialog
            title="添加律师"
            :visible.sync="setLawyerDialog"
            width="70%"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <div slot="title">
                <div class="dialog-title">设置-律师鱼皮脆-业务定价</div>
                <div class="dialog-subtitle">每项业务支出不用律师不同定价</div>
            </div>
            <el-row style="background-color: #f8f8fb; border-radius: 4px; padding: 10px;">
                <el-col :span="24" class="flc">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedTu" :true-label="1" :false-label="0" @change="changeBox($event, 0)">图文咨询</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.tu" :disabled="!setting.checkedTu" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/1小时</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">一般建议设置为免费便于律师接单，未到时间用户可主动结单，到时间，律师可主动结单也可继续服务</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="flc" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedDian" :true-label="1" :false-label="0" @change="changeBox($event, 1)">电话咨询</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.dian" :disabled="!setting.checkedDian" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/30分钟</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">相对高效的服务，根据实际情况设定。未到时间用户可主动结单，到时间，律师可主动结单也可继续服务</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="flc" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedWen" :true-label="1" :false-label="0" @change="changeBox($event, 2)">文书服务(订金)</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.wen" :disabled="!setting.checkedWen" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/次</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">文书服务设定金额为订金，具体价格以沟通后律师报价为准</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="flc" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedLv" :true-label="1" :false-label="0" @change="changeBox($event, 3)">律师函(订金)</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.lv" :disabled="!setting.checkedLv" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/次</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">律师函设定金额为订金，具体价格以沟通后律师报价为准。</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="flc" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedAn" :true-label="1" :false-label="0" @change="changeBox($event, 4)">案件委托</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.an" :disabled="!setting.checkedAn" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/次</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">案件委托设定金额为订金，具体价格以沟通后律师报价为准。</span>
                    </el-col>
                </el-col>
                <el-col :span="24" class="flc" style="margin-top: 15px;">
                    <el-col :span="4">
                        <el-checkbox v-model="setting.checkedQi" :true-label="1" :false-label="0" @change="changeBox($event, 5)">企业服务</el-checkbox>
                    </el-col>
                    <el-col :span="4">
                        <el-input v-model="settingForm.qi" :disabled="!setting.checkedQi" />
                    </el-col>
                    <el-col :span="3">
                        <span style="padding-left: 5px;">元/次</span>
                    </el-col>
                    <el-col :span="13">
                        <span style="font-size: 12px; color: red;">一般建议设置为免费便于律师接单，未到时间用户可主动结单，到时间，律师可主动结单也可继续服务</span>
                    </el-col>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelSetLawyerDialog">取 消</el-button>
                <el-button type="primary" @click="setLawyerSubmit">保存设置</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getLawyerList, getTagList, lawOfficeList, lawyerSet, lawyerFind, getBusiness, setBusiness } from '@/api/lawyerApi'
import { getMemberList } from '@/api/userApi'
// import { uploadImage } from '@/api/globalApi'
import api from '@/api'
import cityTwo from '@/assets/country-data-master/country-level2-data'
export default {
    name: 'Personnel',
    data() {
        return {
            search: {
                nickname: '',
                mobile: '',
                joinTime: [],
                endTime: [],
                isonline: 2,
                level: '1',
                tag_ids: []
            },
            currentPage: 1,
            pageSize: 10,
            total: 0,
            pageSizes: [5, 10, 15, 20],
            tableData: [],
            addLawyerDialog: false,
            setLawyerDialog: false,
            addLawyerForm: {
                id: '',
                nickname: '',
                avatar: '',
                province: '',
                selectedOptions: [],
                city: '',
                office_id: '',
                mobile: '',
                introduction: '',
                tag_ids: [],
                job_title: ''
            },
            setLawyerForm: {},
            rules: {
                id: [
                    { required: true, message: '请输入内容', trigger: 'change' }
                ],
                office_id: [
                    { required: true, message: '请选择律师', trigger: 'change' }
                ],
                mobile: [
                    { required: true, message: '请输入联系电话', trigger: 'blur' }
                ],
                tag_ids: [
                    { required: true, message: '请选择标签', trigger: 'change' }
                ],
                selectedOptions: [
                    { type: 'array', required: true, message: '请选择地区', trigger: 'change' }
                ],
                introduction: [
                    { required: true, message: '请输入个人介绍', trigger: 'blur' }
                ],
                avatar: [
                    { required: true, message: '请上传头像', trigger: 'change' }
                ]
            },
            options: [
                {
                    value: '选项1',
                    label: '黄金糕'
                },
                {
                    value: '选项2',
                    label: '双皮奶'
                }
            ],
            cityTwo: cityTwo,
            imageUrl: '',
            imageUrlBig: '',
            dialogVisibleUpImg: false,
            percentage: 0,
            isShowPercentage: false,
            isShowPercentageBig: false,
            setting: {
                checkedTu: 0,
                checkedDian: 0,
                checkedWen: 0,
                checkedLv: 0,
                checkedAn: 0,
                checkedQi: 0
            },
            settingForm: {
                tu: '',
                dian: '',
                wen: '',
                lv: '',
                an: '',
                qi: ''
            },
            tagList: [],
            lawyers: [],
            timeout: null,
            lawOfficeList: [], // 律所列表
            dialogTitle: '', // 律师的添加和编辑标题
            editId: '', // 编辑的ID
            business: [] // 设置的数组
        }
    },
    created() {
        this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
        this._getLawyerList()
        this._getTagList()
    },
    methods: {
        changeDateCreatTime(val) {
            console.log(val)
        },
        changeTag(val) {
            console.log(val)
        },
        changeTime(val) {
            this.$nextTick(() => {
                if (val == null) {
                    this.search.joinTime = []
                }
            })
        },
        changeTimeEnd(val) {
            this.$nextTick(() => {
                if (val == null) {
                    this.search.endTime = []
                }
            })
        },
        async _getTagList() {
            const res = await getTagList()
            console.log(res)
            this.tagList = res.data.list.reverse()
        },
        async _getLawyerList() {
            let data = {
                p: this.currentPage,
                length: this.pageSize,
                nickname: this.search.nickname,
                mobile: this.search.mobile,
                create_time_start: this.search.joinTime[0] || '',
                create_time_end: this.search.joinTime[1] || '',
                last_time_start: this.search.endTime[0] ? this.search.endTime[0] : '',
                last_time_end: this.search.endTime[1] ? this.search.endTime[1] : '',
                tag_ids: this.search.tag_ids,
                isonline: this.search.isonline === 2 ? '' : this.search.isonline
            }
            const res = await getLawyerList(data)
            this.tableData = res.data.list
            this.total = res.data.total
            this.$SpinkitLoading.close()
            console.log(res)
        },
        addLawyer() {
            this.dialogTitle = '添加律师'
            this.addLawyerDialog = true
            this._lawOfficeList()
        },
        async _lawOfficeList() {
            const res = await lawOfficeList({length: 1000})
            this.lawOfficeList = res.data.list
            console.log(res)
        },
        async _getMemberList() {
            const res = await getMemberList({nickname: this.addLawyerForm.nickname})
            this.lawyers = res.data.list
            this.lawyers.forEach(item => item.value = item.nickname)
            console.log(res)
        },
        cancelLawyerDialog() {
            this.addLawyerDialog = false
            this.resetForm('addLawyerForm')
            this.addLawyerForm.nickname = ''
            this.addLawyerForm.id = ''
            this.imageUrl = ''
            this.imageUrlBig = ''
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        handleChangeCity(value) {
            console.log(value)
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
            const isLt2M = file.size / 1024 / 1024 < 10
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 或者 PNG 格式!')
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 10MB!')
            }
            return isJPG && isLt2M
        },
        uploadFile(data) {
            console.log(data)
            this.isShowPercentage = true
            const _file = data.file
            let formData = new FormData()
            formData.append('image', _file)
            // const res = await uploadImage(formData)
            // console.log(res)
            // this.imageUrl = res.data.filename
            api.post('/client/visitor/uploadImage', formData, {onUploadProgress: progressEvent => {
                console.log(progressEvent)
                this.percentage = progressEvent.loaded / progressEvent.total * 100 | 0
            }}).then(res => {
                console.log(res)
                this.isShowPercentage = false
                this.imageUrl = res.data.filename
                this.$message.success('上传成功')
            }).catch(err => {
                console.log(err)
                this.$message.error('网络超时')
            })
        },
        uploadFileBig(data) {
            console.log(data)
            this.isShowPercentageBig = true
            const _file = data.file
            let formData = new FormData()
            formData.append('image', _file)
            // const res = await uploadImage(formData)
            // console.log(res)
            // this.imageUrl = res.data.filename
            api.post('/client/visitor/uploadImage', formData, {onUploadProgress: progressEvent => {
                console.log(progressEvent)
                this.percentage = progressEvent.loaded / progressEvent.total * 100 | 0
            }}).then(res => {
                console.log(res)
                this.isShowPercentageBig = false
                this.imageUrlBig = res.data.filename
                this.$message.success('上传成功')
            }).catch(err => {
                console.log(err)
                this.$message.error('网络超时')
            })
        },
        handleRemove(file) {
            console.log(file)
        },
        // 分页 2 个方法
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`)
            this.pageSize = val
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            this._getLawyerList()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
            this.currentPage = val
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            this._getLawyerList()
        },
        async handleClick(row, data) {
            this.editId = row.id
            if (data === 'setting') {
                const res = await getBusiness({mid: row.id})
                console.log(res)
                this.setLawyerDialog = true
                this.business = res.data.list.business
                this.business.forEach(item => {
                    if (item.type == 0) {
                        this.setting.checkedTu = item.status - 0
                        this.settingForm.tu = item.amount
                    } else if (item.type == 1) {
                        this.setting.checkedDian = item.status - 0
                        this.settingForm.dian = item.amount
                    } else if (item.type == 2) {
                        this.setting.checkedWen = item.status - 0
                        this.settingForm.wen = item.amount
                    } else if (item.type == 3) {
                        this.setting.checkedLv = item.status - 0
                        this.settingForm.lv = item.amount
                    } else if (item.type == 4) {
                        this.setting.checkedAn = item.status - 0
                        this.settingForm.an = item.amount
                    } else if (item.type == 5) {
                        this.setting.checkedQi = item.status - 0
                        this.settingForm.qi = item.amount
                    }
                })
            } else if (data === 'edit') {
                this.dialogTitle = '编辑律师'
                this.addLawyerDialog = true
                this._lawOfficeList()
                const res = await lawyerFind({id: row.id})
                this.addLawyerForm = res.data.list
                this.addLawyerForm.tag_ids = res.data.list.tag_ids.map(item => item - 0)
                this.addLawyerForm.tag_ids = [...res.data.list.tag_ids]
                this.addLawyerForm.selectedOptions = [res.data.list.province, res.data.list.city]
                console.log(this.addLawyerForm.tag_ids)
                this.imageUrl = res.data.list.avatar
                this.imageUrlBig = res.data.list.avatar_big
                console.log(res)
            }
        },
        // 设置的保存事件
        async setLawyerSubmit() {
            let arr = [
                {type: 0, amount: this.settingForm.tu, status: this.setting.checkedTu},
                {type: 1, amount: this.settingForm.dian, status: this.setting.checkedDian},
                {type: 2, amount: this.settingForm.wen, status: this.setting.checkedWen},
                {type: 3, amount: this.settingForm.lv, status: this.setting.checkedLv},
                {type: 4, amount: this.settingForm.an, status: this.setting.checkedAn},
                {type: 5, amount: this.settingForm.qi, status: this.setting.checkedQi}
            ]
            let data = {mid: this.editId, business: arr}
            console.log(data)
            const res = await setBusiness(data)
            this.setLawyerDialog = false
            this.$message.success('设置成功')
            console.log(res)
        },
        changeBox(val, index) {
            console.log(val, index)
        },
        cancelSetLawyerDialog() {
            this.setLawyerDialog = false
        },
        querySearchAsync(queryString, cb) {
            this._getMemberList()
            let results = queryString ? this.lawyers.filter(this.createStateFilter(queryString)) : this.lawyers
            clearTimeout(this.timeout)
            this.timeout = setTimeout(() => {
                cb(results)
            }, 1000 * Math.random())
            console.log(results)
        },
        createStateFilter(queryString) {
            return state => {
                return (state.nickname.indexOf(queryString) === 0)
            }
        },
        handleSelectFetch(item) {
            console.log(item)
            this.addLawyerForm.id = item.id
        },
        deleteAvatar() {
            this.imageUrl = ''
        },
        deleteAvatarBig() {
            this.imageUrlBig = ''
        },
        submit() {
            if (!this.addLawyerForm.id) return this.$message.error('律师姓名不能为空')
            if (!this.imageUrl) return this.$message.error('请上传头像')
            this.$refs.addLawyerForm.validate(async valid => {
                if (!valid) return false
                console.log(this.addLawyerForm)
                let data = {
                    id: this.addLawyerForm.id,
                    nickname: this.addLawyerForm.nickname,
                    mobile: this.addLawyerForm.mobile,
                    province: this.addLawyerForm.selectedOptions[0],
                    city: this.addLawyerForm.selectedOptions[1],
                    office_id: this.addLawyerForm.office_id,
                    avatar: this.imageUrl || '',
                    introduction: this.addLawyerForm.introduction,
                    tag_ids: this.addLawyerForm.tag_ids,
                    avatar_big: this.imageUrlBig || '',
                    job_title: this.addLawyerForm.job_title
                }
                console.log(data)
                const res = await lawyerSet(data)
                console.log(res)
                if (this.dialogTitle === '添加律师') {
                    this.$message.success('添加成功')
                } else {
                    this.$message.success('修改成功')
                }
                this.addLawyerDialog = false
                this.resetForm('addLawyerForm')
                this.addLawyerForm.id = ''
                this.addLawyerForm.nickname = ''
                this.imageUrl = ''
                this.imageUrlBig = ''
                this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
                this._getLawyerList()
            })
        }
    }
}
</script>

<style scoped lang="scss">
    .over-hidden {
        display: flex;
        align-items: center;
        .avatar {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .info {
            .top {
                display: flex;
                align-items: center;
            }
            .bot {
                font-size: 14px;
                color: #409eff;
            }
        }
    }
    .tags {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 4px;
        span {
            display: flex;
            width: 47%;
            background-color: #f2f2f2;
            justify-content: center;
            margin-bottom: 5px;
            &:nth-child(2n-1) {
                margin-right: 5px;
            }
        }
    }
    .upload {
        display: flex;
        .img {
            width: 120px;
            height: 120px;
            margin-left: 15px;
            border-radius: 6px;
        }
    }
    .upload-del {
        position: absolute;
        left: 120px;
        top: -10px;
    }
</style>
